document.body.onload = function() {
  var checkin = decode(window.location.search.substring(1));

  if (!!checkin['isMayor']) {
    get('mayor').style.display = 'block';
  }

  fillIn('userimg', checkin['user']['photo'], 'src');

  var name = checkin['user']['firstName'] + ' ' +
      (checkin['user']['lastName'] || '');
  fillIn('userlink', name);
  fillIn('venuelink', checkin['venue'] ? checkin['venue']['name'] : null);
  fillIn('ago', hoursAgo(checkin['createdAt']));
  fillIn('shout', checkin['shout']);
  if (checkin['shout']) {
    get('commentsContainer').style.display = 'block';
  }
  fillIn('event', checkin['event'] ? checkin['event']['name'] : null);
  if ('city' in checkin['venue']['location']) {
    var city = checkin['venue']['location']['city'] + ', ' +
        checkin['venue']['location']['state'];
    fillIn('venuecity', ' &bull; ' + city);
  } else {  
    get('venuecity').style.display = 'none';
  }

  // Linkify all the outbound links
  var checkinUrl = 'https://foursquare.com/user/' + checkin['user']['id'] +
      '/checkin/' + checkin['id'];
  linkify('open_checkin', checkinUrl, true);

  var userUrl ='https://www.foursquare.com/user/' + checkin['user']['id'];
  linkify('open_user', userUrl);

  var venueUrl = 'https://www.foursquare.com/venue/' + (checkin['venue'] ? checkin['venue']['id'] : null);
  linkify('open_venue', venueUrl);

  // TODO: Encode this in the URL since we already had it before.
  getItem('self_pic', function(settings) {
    var selfPic = settings['self_pic'] || '';
    fillIn('mypic', selfPic, 'src');
  });

  var comments = 'comments' in checkin ? checkin['comments']['items'] : [];
  var photos = checkin['photos']['items'];

  var items = comments.concat(photos);
  items.sort(byCreatedAtAscending);

  for (var i = 0; i < items.length; i++) {
    get('commentsContainer').style.display = 'block';
    var item = items[i];
    var inner = '<div class="comment">';

    if ('text' in item) {
      var name = item['user']['firstName'] + ' ' +
          (item['user']['lastName'] || '');
      inner += '<img src="' + item['user']['photo'] + '" class="commentPic" />';
      inner += '<span class="commenter">' + name + '</span>';
      inner += '<span class="commentText">' + item['text'] + '</span>';
    } else if ('url' in item) {
      inner += '<div class="photoContainer">';
      inner += '<img class="commentPhoto" src="' + item['url'] + '" /></div>';
    }
    inner += '<p class="commentTime">' + hoursAgo(item['createdAt']);
    inner += '</p></div>';
    get('comments').innerHTML += inner;
  }
  if (items.length) {
    get('comments').innerHTML += '<a href="#" id="mute">mute</a>';
    get('mute').onclick = function(e) {
      muteCheckin('' + checkin['user']['id']);
      window.close();
      e.stopPropagation();
    }
  }

  // Set up "Like" link.
  // NB: checkins/recent does *not* include whether the checkin has been liked
  // by you yet, so this will only trigger on checkins that were fully fetched
  // because they included comments/photos. Oh well, just wait for the
  // activities endpoint I suppose.
  if (checkin['like']) {
    afterLike();
  } else {
    document.querySelector('.like').onclick = function(e) {
      e.stopPropagation();
      e.preventDefault();
      likeCheckin(checkin['id'], afterLike);
    }
  }

  // Make all non-link parts of the notification open the checkin
  /*document.body.onclick = function() {
    chrome.tabs.create({url: checkinUrl});
    window.close();
  };*/

  // window.setTimeout(function() { window.close(); }, 10000);
}

function afterLike() {
  var likeEl = document.querySelector('.like');
  likeEl.innerText = 'Liked';
  likeEl.classList.remove('pre-like');
  likeEl.classList.add('post-like');
  likeEl.onclick = null;
}